<template>
	<div class="typeadd">
		<div class="typeadd_header">
			<span>商品列表</span>
			<button @click="typeadds()">
				添加新的商品
			</button>
		</div>
		<!--  -->
		<div class="typeadd_bottom">
			<ul>
				<li>
					<p>名称</p>
					<p>编号</p>
					<p>作者</p>
					<p>出处</p>
					<p>日期</p>
					<p>图片</p>
					<p>操作</p>
				</li>
				<li v-for="(item,index) in typeadd" :key="item.id">
					<p>{{item.name}}</p>
					<p>{{item.sn}}</p>
					<p>{{item.author}}</p>
					<p>{{item.publisher}}</p>
					<p>{{item.tpublish}}</p>
					<p><img :src="`${$Imgurl}/api/public/showImg/${item.picture}`" /></p>
					<p><button @click="del(index)">修改</button></p>
				</li>
			</ul>
			<ul class="oll">
				<li>分页处理</li>
				<li v-for="index of a" :key="index" @click="btn(index)" :class="{'abc':b==index}" >
					{{index}}
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default{
	name:'Typeadd',
	data(){
		return{
			list:[],
			typeadd:[],
			page:1,
			a:0,
			b:1,
		}
	},
	// 组件创建之后
	created() {
		// 发起get请求，获取数据
		this.axios.get('/api/adm/book/findByPage/'+this.page+'/6').then( (res)=>{
			// 判断状态
			// console.log(res.data.data);
			if(res.status === 200){
				// 向表格渲染数据
				this.typeadd = res.data.data.books;
				this.a = Math.round(res.data.data.total/6);
				// console.log(this.typeadd);
				// this.page = this.typeadd.length/3;
				// // console.log(this.page);
				// this.list = this.typeadd.slice(0,3);
				console.log(this.typeadd);
				console.log(this.a);
			}
		} ).catch( (error)=>{
			console.log(error);
		} )
		// 
	},
	methods:{
		btn(index){
			this.axios.get('/api/adm/book/findByPage/'+index+'/6').then( (res)=>{
				// 判断状态
				// console.log(res.data.data);
				if(res.status === 200){
					// 向表格渲染数据
					this.typeadd = res.data.data.books;
					this.a = Math.round(res.data.data.total/6);
					// console.log(this.typeadd);
					// this.page = this.typeadd.length/3;
					// // console.log(this.page);
					// this.list = this.typeadd.slice(0,3);
					console.log(this.typeadd);
					console.log(this.a);
				}
			} ).catch( (error)=>{
				console.log(error);
			} )
			this.b = index;
		},
		typeadds(){
			this.$router.push('/admin/book');
		},
		// del(index){
		// 	this.title = 
		// }
	}
}
</script>

<style scoped>
.typeadd_header{
	border: 1px solid black;
	line-height: 80px;
}
.typeadd_header span{
	font-size: 20px;
	font-weight: bold;
}
.typeadd_header button{
	float: right;
	height: 23px;
	margin-top: 25px;
	margin-right: 25px;
	font-size: 10px;
}
.typeadd_bottom ul{
	border: 1px solid black;
	margin: 0;
	padding: 0;
	list-style: none;
}
.typeadd_bottom ul li:nth-child(1) p{
	height: 20px;
}
.typeadd_bottom ul li p{
	float: left;
	border: 1px solid black;
	width: 13.5%;
	height: 100px;
}
.typeadd_bottom ul li img{
	width: 100%;
}
.oll{
	border: 1px solid black;
	line-height: 50px;
	float: left;
}
.oll li:nth-child(1){
	width: 70px;
}
.oll li{
	float: left;
	text-align: center;
	width: 30px;
	height: 30px !important;
	line-height: 30px;
	border: 1px solid black;
	
}
.abc{
	background-color: #0000e8;
	color: white;
}
</style>
